<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    html,body{
        width: 100%;
        height: 100%;
        background:#0A0F23;
    }
    *{
        margin: 0;
        padding: 0;
    }
</style>
<body>
<div id="vbarChart" style="width:100%;height:100%;"></div>
<script src="../components/echarts-4.0.4.min.js"></script>
<script>
        var vbarChart = echarts.init(document.getElementById('vbarChart'));

        var barOption = {
        	title: {
                text: '近5年关键职位招聘人数变化',
                left: 'center',
                top:'15%',
                textStyle: {
                    color: '#fff',
                    fontSize: 22
                }
            },
		    backgroundColor: "#0A0F23",
		    color: ["#37A2DA", "#32C5E9", "#67E0E3", "#9FE6B8" ],
		    legend: {
		        data:['NLP','大数据开发','数据挖掘','语音','智能硬件'],
		        textStyle: {
                    color: '#fff',
                    fontSize: 16
                },
                bottom:'5%'
		    },
		    grid: {
		        containLabel: true
		    },
		    xAxis: [{
		        type: 'category',
		        boundaryGap: false,
		        axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
               	nameTextStyle: {
		            color: '#fff'
		        },
                axisTick: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
                axisLabel: {
                    interval: 0,
                    textStyle: {
                        color: '#fff',
                    	fontSize: 16
                    }
                },
                splitLine: {
                    show: false,
                    lineStyle: {
						 color: 'rgba(204, 204, 204, 0.3)'
					}
                },
		        data: ['2013', '2014', '2015', '2016', '2017']
		    }],
		    yAxis: [{
		        type: 'value',
		        max: 3500,
		        axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
               	nameTextStyle: {
		            color: '#fff'
		        },
                axisTick: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
                axisLabel: {
                    interval: 0,
                    textStyle: {
                        color: '#fff',
                    	fontSize: 16
                    }
                },
                splitLine: {
                    show: false,
                    lineStyle: {
						 color: 'rgba(204, 204, 204, 0.3)'
					}
                }
		    }],
		    series: [{
		        name: 'NLP',
		        type: 'line',
		        stack: '总量',
		        areaStyle: {
		            normal: {}
		        },
		        data: [120, 132, 201, 234, 90, 230, 210]
		    }, {
		        name: '大数据开发',
		        type: 'line',
		        stack: '总量',
		        areaStyle: {
		            normal: {}
		        },
		        data: [220, 182, 291, 364, 440, 330, 410]
		    }, {
		        name: '数据挖掘',
		        type: 'line',
		        stack: '总量',
		        areaStyle: {
		            normal: {}
		        },
		        data: [550, 332, 501, 554, 490, 730, 610]
		    }, {
		        name: '智能硬件',
		        type: 'line',
		        stack: '总量',
		        areaStyle: {
		            normal: {}
		        },
		        data: [620, 732, 901, 734, 1290, 1330, 1320]
		    }]
		};

        vbarChart.setOption(barOption);
    </script>
</body>
</html>